<template>

  <div id="ecgchart">
    <line-chart :chart-data="datacollection"></line-chart>
  </div>

</template>

<script>
  import LineChart from './LineChart.js'
  import axios from 'axios'
  export default {
    name: "ecgchart",
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null,
        X: 0,
        Y: 0
      }
    },
    created() {
      //新建图像，要生成五秒的数据
      this.getData(5);
      setInterval(this.getData,5000)
    },
    mounted () {
      this.getData(5);
    },
    methods: {
      getData: function(){
        //times为输入时间，有两种模式，第一种首先生成5s数据，之后
        let that = this;
        axios.get('http://127.0.0.1:5000/signal?L=5').then(function (res) {
          that.X = res.data["time"]
          that.Y = res.data["signal"]
          that.datacollection = {
            labels: that.X,
            datasets: [
              {
                //点半径为0.5
                radius: 0.00000001,
                pointStyle: 'line',
                fill: false,
                borderColor: '#f87979',
                borderWidth: 2,
                label: 'ECG',
                data: that.Y
              }
            ]
          }
        }).catch(function (error) {
          console.log(error);
        })
      }
    }
  }
</script>

<style>
  #ecgchart {
    max-width: 1100px;
    max-height: 1100px;
    margin: 20px auto;

  }
</style>
